<template>
	<div class="con">
		<img src="../assets/img/login/logo.png" class="logo" alt="" />
		<img src="../assets/img/login/title.png" class="title" alt="" />
		<div class="form">
			<div class="tab">
				<div>
					账号登录
				</div>
				<div class="tab__line"></div>
				<div>
					扫码登陆
				</div>
			</div>
			<div class="form__item mb41">
				<img src="../assets/img/login/acc.png" class="form__item__icon" alt="" />
				<input type="text" class="form__item__inp" name="" id="" placeholder="请输入账号">
			</div>
			<div class="form__item">
				<img src="../assets/img/login/pws.png" class="form__item__pws" alt="" />
				<input type="text" class="form__item__inp" name="" id="" placeholder="请输入密码">
			</div>
			<div class="flex mt24" style="align-items: center;">
				<div class="w268"></div>
				<el-checkbox v-model="checked1" label="记住登录" size="large" />
			</div>
			<div class="flex mt78" style="align-items: center;">
				<div class="w268"></div>
				<el-checkbox v-model="checked2" label="同意《用户注册协议》" size="large" />
				<div class="forgetpws">
					忘记密码？
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				list: ['账号登录', '扫码登陆']
			}
		},
		methods: {
			mutateDeeply() {
				// 以下都会按照期望工作
				this.obj.nested.count++
				this.obj.arr.push('baz')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.con {
		width: 100%;
		height: 100%;
		background-image: url('../assets/img/login/bg.png');
		background-size: cover;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.logo {
		height: 4.92rem;
		vertical-align: middle;
		border-style: none;
		margin-top: 4.67rem;
		margin-right: 5.5rem;
	}

	.title {
		height: 8.5rem;
		vertical-align: middle;
		border-style: none;
		margin-right: 3.81rem;
		margin-top: 1.47rem;
	}

	.form {
		width: 27.94rem;
		padding-bottom: 2rem;
		background-color: #1889e7;
		border-radius: 50px;
		margin-top: 2.64rem;
		margin-right: 20.14rem;

		&__item {
			display: flex;
			align-items: center;
			justify-content: center;

			&__icon {
				width: 1.64rem;
				height: 1.94rem;
				margin-right: 1.25rem;
			}

			&__pws {
				width: 1.64rem;
				height: 1.97rem;
				margin-right: 1.25rem;
			}

			&__inp {
				width: 16.42rem;
				height: 2.08rem;
				border-radius: 1.04rem;
				text-indent: 1rem;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 1.15rem;

			}
		}
	}

	input {
		border-color: transparent;
	}

	.tab {
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Microsoft YaHei UI;
		font-weight: 400;
		font-size: 1.44rem;
		color: #FFFFFF;
		padding: 2.03rem 0 2.44rem;

		&__line {
			width: 0.08rem;
			height: 2rem;
			background-color: #fff;
			margin: 0 1.03rem;
		}
	}

	.mb41 {
		margin-bottom: 1.14rem;
	}

	.el-checkbox__label {
		font-family: Microsoft YaHei UI;
		font-weight: 300;
		font-size: 0.68rem;
		color: #FFFFFF;
	}

	.w268 {
		width: 7.44rem;
	}

	.mt24 {
		margin-top: 0.68rem;
	}

	.mt78 {
		margin-top: 2.17rem;
	}

	.forgetpws {
		margin-left: 4.94rem;
		font-family: Microsoft YaHei UI;
		font-weight: 300;
		font-size: 0.68rem;
		color: #FFFFFF;
	}
	.flex{
		display: flex;
	}
	.el-checkbox.el-checkbox--large{
		height: auto!important;
	}
</style>